Ext.define('Ext.my.picker.DateTime', {
        extend: 'Ext.picker.Date',//繼承於 Ext.picker.Date
        alias: 'widget.dateptimeicker',//添加xtype dateptimeicker
        okText:'确定',//確認按鈕文字描述
        okTip:'确定',//確認按鈕提示內容
        dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
        renderTpl: [
            '<div id="{id}-innerEl" role="grid">',
            '<div role="presentation" class="{baseCls}-header">',
            '<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>',
            '<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
            '<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>',
            '</div>',
            '<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="presentation">',
            '<thead role="presentation"><tr role="presentation">',
            '<tpl for="dayNames">',
            '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
            '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
            '</th>',
            '</tpl>',
            '</tr></thead>',
            '<tbody role="presentation"><tr role="presentation">',
            '<tpl for="days">',
            '{#:this.isEndOfWeek}',
            '<td role="gridcell" id="{[Ext.id()]}">',
            '<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
            '</td>',
            '</tpl>',
            '</tr></tbody>',
            '</table>',

            //指定時分秒渲染框架
            '<table id="{id}-timeEl" style="table-layout:auto;width:auto;margin:0 3px;" class="x-datepicker-inner" cellspacing="0">',
            '<tbody><tr>',
            '<td>{%this.renderHourBtn(values,out)%}</td>',
            '<td>{%this.renderMinuteBtn(values,out)%}</td>',
            '<td>{%this.renderSecondBtn(values,out)%}</td>',
            '</tr></tbody>',
            '</table>',

            '<tpl if="showToday">',
            //添加一個確認按鈕渲染
            '<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>',
            '</tpl>',
            '</div>',
            {
                firstInitial: function(value) {
                    return Ext.picker.Date.prototype.getDayInitial(value);
                },
                isEndOfWeek: function(value) {
                    // convert from 1 based index to 0 based
                    // by decrementing value once.
                    value--;
                    var end = value % 7 === 0 && value !== 0;
                    return end ? '</tr><tr role="row">' : '';
                },
                renderTodayBtn: function(values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
                },
                renderMonthBtn: function(values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
                },

                //指定渲染方法調用
                renderHourBtn: function(values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);//根據組件獲得組件的html輸出
                },
                renderMinuteBtn: function(values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);
                },
                renderSecondBtn: function(values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);
                },
                renderOkBtn: function(values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);
                }
            }
        ],

        beforeRender: function () {
            var me = this,_$Number=Ext.form.field.Number;
            //在組件渲染之前，將自定義添加的時、分、秒和確認按鈕進行初始化
            //組件寬度可能需要調整下，根據使用的theme不同，寬度需要調整
            me.hourBtn=new _$Number({
                minValue:0,
                maxValue:23,
                step:1,
                width:55
            });
            me.minuteBtn=new _$Number({
                minValue:0,
                maxValue:59,
                step:1,
                width:70,
                labelWidth:10,
                fieldLabel:'&nbsp;'
            });
            me.secondBtn=new _$Number({
                minValue:0,
                maxValue:59,
                step:1,
                width:70,
                labelWidth:10,
                fieldLabel:'&nbsp;'//在組件之前渲染 ':'
            });

            me.okBtn = new Ext.button.Button({
                ownerCt: me,
                ownerLayout: me.getComponentLayout(),
                text: me.okText,
                tooltip: me.okTip,
                tooltipType:'title',
                handler:me.okHandler,//確認按鈕的事件委托
                scope: me
            });
            me.callParent();
        },

        finishRenderChildren: function () {
            var me = this;
            //組件渲染完成後，需要調用子元素的finishRender，從而獲得事件绑定
            me.hourBtn.finishRender();
            me.minuteBtn.finishRender();
            me.secondBtn.finishRender();
            me.okBtn.finishRender();
            me.callParent();
        },

        /**
         * 確認 按鈕觸發的調用
         */
        okHandler : function(){
            var me = this,
                btn = me.okBtn;

            if(btn && !btn.disabled){
                me.setValue(this.getValue());
                me.fireEvent('select', me, me.value);
                me.onSelect();
            }
            return me;
        },

        /**
         * 覆蓋了父類的方法，因为父類中是根據時間的getTime判斷的，因此需要對時、分、秒分別值为0才能保證當前值的日期選擇
         * @private
         * @param {Date} date The new date
         */
        selectedUpdate: function(date){
            this.callParent([Ext.Date.clearTime(date,true)]);
        },

        /**
         * 更新picker的顯示內容，需要同時更新時、分、秒輸入框的值
         * @private
         * @param {Date} date The new date
         * @param {Boolean} forceRefresh True to force a full refresh
         */
        update : function(date, forceRefresh){
            var me = this;
            me.hourBtn.setValue(date.getHours());
            me.minuteBtn.setValue(date.getMinutes());
            me.secondBtn.setValue(date.getSeconds());

            return this.callParent(arguments);
        },

        /**
         * 從picker選中後，賦值時，需要從時、分、秒也獲得當前值
         * datetimefield也會調用這個方法對picker初始化，因此添加一個isfixed参數。
         * @param {Date} date The new date
         * @param {Boolean} isfixed True 時，忽略從時分秒中獲取值
         */
        setValue : function(date, isfixed){
            var me = this;
            if(isfixed!==true){
                date.setHours(me.hourBtn.getValue());
                date.setMinutes(me.minuteBtn.getValue());
                date.setSeconds(me.secondBtn.getValue());
            }
            me.value=date;
            me.update(me.value);
            return me;
        },

        // @private
        // @inheritdoc
        beforeDestroy : function() {
            var me = this;

            if (me.rendered) {
                //銷毀組件時，也需要銷毀自定義的控件
                Ext.destroy(
                    me.hourBtn,
                    me.minuteBtn,
                    me.secondBtn,
                    me.okBtn
                );
            }
            me.callParent();
        }
    },
    function() {
        var proto = this.prototype,
            date = Ext.Date;

        proto.monthNames = date.monthNames;
//        proto.dayNames   = date.dayNames;
        proto.format     = date.defaultFormat;
    });

/**
 * 帶時間的日期輸入控件
 * 轉載請注明來自於gogo1217.iteye.crm
 */
Ext.define('dateTime', {
    extend:'Ext.form.field.Date',
    alias: 'widget.datetimefield',
    requires: ['Ext.my.picker.DateTime'],

    /**
     * @cfg {String} format
     * The default date format string which can be overriden for localization support. The format must be valid
     * according to {@link Ext.Date#parse}.
     */
    format : "Y-m-d H:i:s",

    /**
     * @cfg {String} altFormats
     * Multiple date formats separated by "|" to try when parsing a user input value and it does not match the defined
     * format.
     */
    altFormats : "Y-m-d H:i:s",

    createPicker: function() {
        var me = this,
            format = Ext.String.format;

        //修改picker为自定義picker
        return new Ext.my.picker.DateTime({
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            hidden: true,
            focusOnShow: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: {
                scope: me,
                select: me.onSelect
            },
            keyNavConfig: {
                esc: function() {
                    me.collapse();
                }
            }
        });
    },
    /**
     * @private
     */
    onExpand: function() {
        var value = this.getValue();

        //多傳一個参數，從而避免時分秒被忽略。
        this.picker.setValue(Ext.isDate(value) ? value : new Date(), true);
    }
});